<template>
    <div class="apprasie-suspend width-full">
        <appraise-act v-if="appraise && appraise.show" :appraiseProp="appraise" @showAppraise="$emit('showAppraise')">
        </appraise-act>
        <!--估价成功的弹窗-->
        <!--<div class="success-alert-box">-->
        <!--<success-alert-->
        <!--v-if="appraise.successAlert.show && swiperIndex == index"-->
        <!--:appraiseSuccessProp="appraise.successAlert"-->
        <!--@showShare="$emit('showShare')"-->
        <!--@closeModule="appraise.successAlert.show = false">-->
        <!--</success-alert>-->
        <!--</div>-->

        <div class="input-appraise-wrap" v-if="appraiseInfo && Object.keys(appraiseInfo).includes('actState')">
            <input-appraise v-if="appraiseInfo.actState == 0 && !appraiseInfo.limitJoin" ref="inputAppraise"
                :inputAppraiseProp="{actKey:swiperItem.actKey}" @inputFocus="inputFocus" @forbidSwiper="forbidSwiper"
                @doAppraise="doAppraise">
            </input-appraise>
            <div v-else-if="appraiseInfo.actState == 0 && appraiseInfo.limitJoin"
                class="input-box displayFlex flexCenter activity-remind-btn" @click="$emit('showShare')">
                <span>分享再估一次</span>
            </div>
            <!--不需要下载好看好玩-->
            <div class="down-app-box" v-if="false">
                <div class="input-box displayFlex flexCenter activity-remind-btn " @click="toHaoKanHaoWan">
                    <span>我要下载好看好玩APP</span>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name: "ApprasieSuspend",
    props: {
        swiperItem: Object,
    },
    data () {
        return {
            appraise: {
                show: false,
                actKey: 0,
                carrierId: 0,
                successAlert: {
                    show: false,
                }
            },
            appraiseInfo: {
            }
        }
    },
    mounted () {
        this.init();
    },
    methods: {
        refreshAppraise (tempObj) {
            this.appraise = Object.assign({}, this.appraise, tempObj);
        },
        forbidSwiper (boolean) {
            this.$emit('forbidSwiper', boolean);
        },
        updateAppraiseInfo (obj) {
            this.appraise.successAlert = Object.assign({}, this.appraise.successAlert, obj);
            let that = this;
            setTimeout(() => {
                if (this.$refs.inputAppraise && this.$refs.inputAppraise.length > 0) {
                    that.$refs.inputAppraise.forEach((value, index) => {
                        that.$refs.inputAppraise[index].appraiseValue = null;
                    });
                }
            }, 30)
        },
        inputFocus (boolean) {
            this.$emit('inputFocus', boolean)
        },
        doAppraise (number, obj) {
            this.$emit('doAppraise', number, obj)
        },
        init () {
            let url = `${this.NW_API_API_LOCALE_VERSION}/interact/detail/${this.swiperItem.actKey}/${this.userId}?promotionId=${this.swiperItem.promotionId}`;
            this.xurl.get(url).then(data => {
                if (data.success) {
                    this.appraiseInfo = Object.assign({}, this.appraiseInfo, data.result);
                }
            })
        }
    },
    components: {
        /*估价活动*/
        'appraise-act': () => import('../../../pages/activity/appraise/Appraise'),
        // 'success-alert': () => import('../../../pages/activity/appraise/components/SuccessAlert'),
        'input-appraise': () => import('../../../pages/activity/appraise/components/InputAppraise'),
    }
}
</script>

<style scoped lang="scss">
.apprasie-suspend {
    padding: 0;
    position: absolute;
    left: 0;
    bottom: 0;
    z-index: 2;
    .appraise {
        position: absolute;
        left: 0;
        bottom: 0;
    }
    .input-appraise-wrap {
        position: absolute;
        bottom: 0.65rem;
        padding-right: 0.11rem;
        width: 3.2rem;
        left: 50%;
        transform: translateX(-50%);
    }
}
.success-alert-box /deep/ {
    .positionFixedCenter {
        position: absolute;
        top: -1.25rem;
        height: 3.86rem;
    }
    .module-bord-content {
        top: -0.9rem;
    }
}
.apprasie-suspend /deep/ {
    .slide-bottom-transition {
        position: absolute;
        max-height: 80vh;
    }
}
.input-appraise-wrap /deep/ {
    .com_black {
        position: absolute;
        left: 0;
        top: -6.67rem;
        top: -100vh;
        height: 6.67rem;
        height: 100vh;
        width: 100%;
        width: 100vw;
    }
}
.activity-remind-btn {
    background-image: linear-gradient(to bottom, #ffac0b, #ffd906);
    /*background-color: #FDD909;*/
    color: #fff;
    font-size: 0.16rem;
}
.input-box {
    box-sizing: border-box;
    background-color: #fff;
    border-radius: 0.25rem;
    padding: 0.05rem 0.07rem 0.05rem 0.15rem;
    height: 0.4rem;
    margin-top: 0.1rem;
}
</style>